<template>
  <div class="detailpage">
    <div class="PersonalPage">
      <div class="head">
        <useHeadContent
          :data="classList.filter((item) => item.id == resName)[0]"
          :id="pageId"
          :totalLikes="totalLikes"
          :totalComments="totalComments"
          :totalWorks="totalWorks"
          :totalCommentCount="totalCommentCount"
        />
      </div>
      <div class="main">
        <useMainTab
          :data="arr"
          :status="typeTab"
          v-model:searchName="inputVal"
          @statusChange="statusChange"
          @onChangeIpt="onChangeIpt"
          :id="pageId"
        />
        <useShowCompile
          :status="typeTab"
          :data="arr"
          :showModal="showModal"
          @onAddCompile="onAddCompile"
          @onDelCompile="onDelCompile"
          @addList="addList"
        />
        <div class="back">
          <div class="backList">
            <useMainContent
              v-for="item in filteredItems"
              :key="item.id"
              :data="item"
              :userData="arr"
              :id="pageId"
              :status="typeTab"
              @onLike="onLike"
              v-model:commentVal="item.comment"
              @onComment="onComment"
              @onSend="onSend"
              @onDelItem="onDelItem"
              @clearTrack="clearTrack"
              @changeAudio="changeAudio"
              @suspend="suspend"
            />
          </div>
        </div>
      </div>
    </div>
    <useModal
      :isVisible="showModal"
      @update:isVisible="showModal = $event"
      @option-selected="handleOptionSelected"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeMount, watch } from "vue";
import useHeadContent from "@/components/PersonalPage/useHeadContent.vue";
import useMainTab from "@/components/PersonalPage/useMainTab.vue";
import useShowCompile from "@/components/PersonalPage/useShowCompile.vue";
import useMainContent from "@/components/PersonalPage/useMainContent.vue";
import audios from "@/assets/audio/11.mp3";
import { useRoute } from "vue-router";

const route = useRoute();
const pageId = route.params.id;
console.log("pageId: ", pageId);

// 截取后三个字符
const idName = ref(pageId != undefined ? pageId.slice(-1) : undefined);
console.log("idName: ", idName.value);

// 剩余的部分
const resName = ref(pageId != undefined ? pageId.slice(0, -1) : undefined);
console.log("resName: ", resName.value);

// 个人信息
const arr = ref({});
// 评论的信息
const list = ref([
  {
    id: 0,
    type: 1,
    userId: 1,
    UserShareId: 1,
    title: "花园宝宝",
    author: "林东东",
    time: "2024-08-13 18:00",
    like: 20,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "路人甲",
        scoring: 5,
        comment: "爱听",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "无敌",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 1,
    type: 2,
    userId: 1,
    UserShareId: 1,
    title: "小星星",
    author: "赵夏秋",
    time: "2024-08-13 18:00",
    like: 2110,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 2,
    type: 0,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 3,
    type: 3,
    userId: 1,
    UserShareId: 1,
    title: "花园宝宝",
    author: "林东东",
    time: "2024-08-13 18:00",
    like: 20,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "路人甲",
        scoring: 5,
        comment: "爱听",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "无敌",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 4,
    type: 4,
    userId: 1,
    UserShareId: 1,
    title: "小星星",
    author: "赵夏秋",
    time: "2024-08-13 18:00",
    like: 2110,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 5,
    type: 0,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 6,
    type: 1,
    userId: 1,
    UserShareId: 1,
    title: "花园宝宝",
    author: "林东东",
    time: "2024-08-13 18:00",
    like: 20,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "路人甲",
        scoring: 5,
        comment: "爱听",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "无敌",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 7,
    type: 2,
    userId: 1,
    UserShareId: 1,
    title: "小星星",
    author: "赵夏秋",
    time: "2024-08-13 18:00",
    like: 2110,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 8,
    type: 3,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
  {
    id: 9,
    type: 0,
    userId: 1,
    UserShareId: 1,
    title: "熊出没",
    author: "张玉坤",
    time: "2024-08-13 18:00",
    like: 21,
    commentShow: false,
    comment: "",
    audioStatus: false,
    audio: audios,
    list: [
      {
        id: 0,
        userId: 0,
        title: "赵夏秋",
        scoring: 5,
        comment: "真不错，加油！",
        time: "2024-08-13 18:00",
      },
      {
        id: 1,
        userId: 1,
        title: "老师",
        scoring: 3,
        comment: "加油！",
        time: "2024-08-13 18:00",
      },
    ],
  },
]);
// 班级数据
const classList = ref([
  {
    id: 0,
    name: "花园一班",
    teacher: [
      {
        id: 0,
        name: "腾老师",
      },
      {
        id: 1,
        name: "赵夏秋",
      },
    ],
    classMembers: [
      {
        id: 0,
        name: "赵夏秋",
      },
      {
        id: 1,
        name: "学生二",
      },
      {
        id: 2,
        name: "学生三",
      },
      {
        id: 3,
        name: "学生四",
      },
      {
        id: 4,
        name: "学生五",
      },
      {
        id: 5,
        name: "学生六",
      },
      {
        id: 6,
        name: "学生七",
      },
      {
        id: 7,
        name: "学生八",
      },
      {
        id: 8,
        name: "学生九",
      },
      {
        id: 9,
        name: "学生十",
      },
      {
        id: 10,
        name: "学生十一",
      },
      {
        id: 11,
        name: "学生十二",
      },
      {
        id: 12,
        name: "学生十三",
      },
      {
        id: 13,
        name: "学生十四",
      },
      {
        id: 14,
        name: "学生十五",
      },
      {
        id: 15,
        name: "学生十六",
      },
      {
        id: 16,
        name: "学生十七",
      },
      {
        id: 17,
        name: "学生十八",
      },
      {
        id: 18,
        name: "学生十九",
      },
      {
        id: 19,
        name: "学生二十",
      },
      {
        id: 20,
        name: "学生二十一",
      },
      {
        id: 21,
        name: "学生二十二",
      },
      {
        id: 22,
        name: "学生二十三",
      },
      {
        id: 23,
        name: "学生二十四",
      },
      {
        id: 24,
        name: "学生二十五",
      },
      {
        id: 25,
        name: "学生二十六",
      },
      {
        id: 26,
        name: "学生二十七",
      },
      {
        id: 27,
        name: "学生二十八",
      },
      {
        id: 28,
        name: "学生二十九",
      },
      {
        id: 29,
        name: "学生三十",
      },
    ],
  },
  {
    id: 1,
    name: "花园二班",
    teacher: [
      {
        id: 0,
        name: "一腾老师",
      },
      {
        id: 1,
        name: "赵夏秋",
      },
    ],
    classMembers: [
      {
        id: 0,
        name: "赵夏秋",
      },
      {
        id: 1,
        name: "学生二",
      },
      {
        id: 2,
        name: "学生三",
      },
      {
        id: 3,
        name: "学生四",
      },
      {
        id: 4,
        name: "学生五",
      },
      {
        id: 5,
        name: "学生六",
      },
      {
        id: 6,
        name: "学生七",
      },
      {
        id: 7,
        name: "学生八",
      },
      {
        id: 8,
        name: "学生九",
      },
      {
        id: 9,
        name: "学生十",
      },
      {
        id: 10,
        name: "学生十一",
      },
      {
        id: 11,
        name: "学生十二",
      },
      {
        id: 12,
        name: "学生十三",
      },
      {
        id: 13,
        name: "学生十四",
      },
      {
        id: 14,
        name: "学生十五",
      },
      {
        id: 15,
        name: "学生十六",
      },
      {
        id: 16,
        name: "学生十七",
      },
      {
        id: 17,
        name: "学生十八",
      },
      {
        id: 18,
        name: "学生十九",
      },
      {
        id: 19,
        name: "学生二十",
      },
      {
        id: 20,
        name: "学生二十一",
      },
      {
        id: 21,
        name: "学生二十二",
      },
      {
        id: 22,
        name: "学生二十三",
      },
      {
        id: 23,
        name: "学生二十四",
      },
      {
        id: 24,
        name: "学生二十五",
      },
      {
        id: 25,
        name: "学生二十六",
      },
      {
        id: 26,
        name: "学生二十七",
      },
      {
        id: 27,
        name: "学生二十八",
      },
      {
        id: 28,
        name: "学生二十九",
      },
      {
        id: 29,
        name: "学生三十",
      },
    ],
  },
  {
    id: 2,
    name: "花园三班",
    teacher: [
      {
        id: 0,
        name: "赵夏秋老师",
      },
      {
        id: 1,
        name: "赵紫潼",
      },
    ],
    classMembers: [
      {
        id: 0,
        name: "赵夏秋",
      },
      {
        id: 1,
        name: "学生二",
      },
      {
        id: 2,
        name: "学生三",
      },
      {
        id: 3,
        name: "学生四",
      },
      {
        id: 4,
        name: "学生五",
      },
      {
        id: 5,
        name: "学生六",
      },
      {
        id: 6,
        name: "学生七",
      },
      {
        id: 7,
        name: "学生八",
      },
      {
        id: 8,
        name: "学生九",
      },
      {
        id: 9,
        name: "学生十",
      },
      {
        id: 10,
        name: "学生十一",
      },
      {
        id: 11,
        name: "学生十二",
      },
      {
        id: 12,
        name: "学生十三",
      },
      {
        id: 13,
        name: "学生十四",
      },
      {
        id: 14,
        name: "学生十五",
      },
      {
        id: 15,
        name: "学生十六",
      },
      {
        id: 16,
        name: "学生十七",
      },
      {
        id: 17,
        name: "学生十八",
      },
      {
        id: 18,
        name: "学生十九",
      },
      {
        id: 19,
        name: "学生二十",
      },
      {
        id: 20,
        name: "学生二十一",
      },
      {
        id: 21,
        name: "学生二十二",
      },
      {
        id: 22,
        name: "学生二十三",
      },
      {
        id: 23,
        name: "学生二十四",
      },
      {
        id: 24,
        name: "学生二十五",
      },
      {
        id: 25,
        name: "学生二十六",
      },
      {
        id: 26,
        name: "学生二十七",
      },
      {
        id: 27,
        name: "学生二十八",
      },
      {
        id: 28,
        name: "学生二十九",
      },
      {
        id: 29,
        name: "学生三十",
      },
    ],
  },
  {
    id: 3,
    name: "花园四班",
    teacher: [
      {
        id: 0,
        name: "赵夏秋老师",
      },
      {
        id: 1,
        name: "赵紫潼",
      },
    ],
    classMembers: [
      {
        id: 0,
        name: "赵夏秋",
      },
      {
        id: 1,
        name: "学生二",
      },
      {
        id: 2,
        name: "学生三",
      },
      {
        id: 3,
        name: "学生四",
      },
      {
        id: 4,
        name: "学生五",
      },
      {
        id: 5,
        name: "学生六",
      },
      {
        id: 6,
        name: "学生七",
      },
      {
        id: 7,
        name: "学生八",
      },
      {
        id: 8,
        name: "学生九",
      },
      {
        id: 9,
        name: "学生十",
      },
      {
        id: 10,
        name: "学生十一",
      },
      {
        id: 11,
        name: "学生十二",
      },
      {
        id: 12,
        name: "学生十三",
      },
      {
        id: 13,
        name: "学生十四",
      },
      {
        id: 14,
        name: "学生十五",
      },
      {
        id: 15,
        name: "学生十六",
      },
      {
        id: 16,
        name: "学生十七",
      },
      {
        id: 17,
        name: "学生十八",
      },
      {
        id: 18,
        name: "学生十九",
      },
      {
        id: 19,
        name: "学生二十",
      },
      {
        id: 20,
        name: "学生二十一",
      },
      {
        id: 21,
        name: "学生二十二",
      },
      {
        id: 22,
        name: "学生二十三",
      },
      {
        id: 23,
        name: "学生二十四",
      },
      {
        id: 24,
        name: "学生二十五",
      },
      {
        id: 25,
        name: "学生二十六",
      },
      {
        id: 26,
        name: "学生二十七",
      },
      {
        id: 27,
        name: "学生二十八",
      },
      {
        id: 28,
        name: "学生二十九",
      },
      {
        id: 29,
        name: "学生三十",
      },
    ],
  },
]);

// 搜索 tab切换
const typeTab = ref(3);
const inputVal = ref("");
const statusChange = (data) => {
  console.log("data: ", data);
  typeTab.value = data;
  console.log("typeTab.value: ", typeTab.value);
};
const onChangeIpt = (data) => {
  inputVal.value = data;
};
// 计算属性：过滤后的项目
const filteredItems = computed(() => {
  // return list.value.filter((item) => item.title.includes(inputVal.value));
  return list.value.filter(
    (item) => item.title.includes(inputVal.value) && item.type === typeTab.value
  );
});
// 点赞
const onLike = (done) => {
  console.log("done: ", done);
};
// 评论
const onComment = (id) => {
  list.value[id].commentShow = !list.value[id].commentShow;
};
// 发送
const onSend = (obj) => {
  console.log("obj: ", obj);
  console.log("list.value: ", list.value[obj.pid]);
  if (arr.value.role[0] !== 2) {
    list.value[obj.pid].list.unshift(obj);
  }
};
// 删除评论
const onDelItem = (obj) => {
  list.value[obj.pid].list = list.value[obj.pid].list.filter(
    (item) => item.id !== obj.id
  );
};
// 编辑类目的添加
const onAddCompile = (obj) => {
  compile.value.push(obj);
};
// 删除类目
const onDelCompile = (id) => {
  compile.value = compile.value.filter((item) => item.id !== id);
};
// 删除音乐
const clearTrack = (id) => {
  console.log(id);
  list.value.forEach((item, index) => {
    if (item.id === id) {
      list.value.splice(index, 1);
    }
  });
};
// 添加乐谱
const showModal = ref(false);
const addList = (done) => {
  console.log("done: ", done);
  showModal.value = done;
  console.log("showModal.value: ", showModal.value);
};
const handleOptionSelected = (option) => {
  console.log("option: ", option);
};
// 切换音乐
const currentAudio = ref(null);
const changeAudio = (obj) => {
  list.value.forEach((item, index) => {
    if (item.id === obj.id) {
      // 当前音频的状态保持不变
      list.value[index].audioStatus = obj.audioStatus;
    } else {
      // 对于其他音频
      if (item.audioStatus) {
        // 如果音频正在播放，需要保持其状态
        if (currentAudio.value && currentAudio.value.id === item.id) {
          // 当前播放的音频，不做处理
          return;
        }
      }
      // 停止并重置未播放的音频
      list.value[index].audioStatus = false; // 设置状态为停止
    }
  });
};
// 切换播放/暂停状态
const suspend = (obj) => {
  list.value.forEach((item, index) => {
    if (item.id === obj.id) {
      // 当前音频的状态保持不变
      list.value[index].audioStatus = obj.audioStatus;
    }
  });
};

// 初始化点赞和评论数
//点赞
const totalLikes = ref(0);
// 评论
const totalComments = ref(0);
// 初始化作品数
const totalWorks = ref(0);
//分享
const totalCommentCount = ref(0);
function updateStats() {
  totalLikes.value = list.value.reduce((acc, item) => acc + item.like, 0);
  totalComments.value = list.value.reduce(
    (acc, item) => acc + item.list.length,
    0
  );
  //作品数量
  totalWorks.value = list.value.length;
}
updateStats();
watch(
  () => list.value,
  (newList, oldList) => {
    updateStats();
  },
  {
    deep: true,
    immediate: true,
  }
);

onBeforeMount(() => {
  arr.value = JSON.parse(localStorage.getItem("userdata"));
});
</script>
<style scoped lang="scss">
.detailpage {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(#f2fff4, #d3ffee);
}

.PersonalPage {
  width: 1024px;
  height: 86vh;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px;

  .main {
    margin-top: 20px;
    width: 100%;
    background-color: white;
    padding: 20px;

    .back {
      height: 86vh;
      margin-top: 20px;
      overflow: hidden;

      .backList {
        height: 100%;
        overflow-y: auto;

        .content:last-child {
          margin-bottom: 220px;
        }
      }

      .backList:last-child {
        padding-bottom: 220px;
      }
    }
  }

  .backList::-webkit-scrollbar {
    width: 0px;
    /* 隐藏滚动条 */
  }

  .backList {
    scrollbar-width: none;
    /* Firefox 隐藏滚动条 */
  }

  .backList {
    -ms-overflow-style: none;
    /* IE 和 Edge 隐藏滚动条 */
  }
}
</style>
